<template>
  <a-card title="状态字典表" :bordered="false">
    <JVxeTable
        ref="tableRef"
        stripe
        bordered
        toolbar
        :toolbarConfig="toolbarConfig"
        rowNumber
        rowSelection
        rowSelectionType="checkbox"
        resizable
        keepSource
        :asyncRemove=false
        rowExpand
        :dragSort=false
        :addSetActive="false"
        clickRowShowSubForm
        clickRowShowMainForm
        :clickSelectRow="false"
        :height="340"
        :loading="loading"
        :columns="columns"
        :dataSource="dataSource"
        :pagination="pagination"

        @save="handleTableSave"
        @removed="handleTableRemove"
        @edit-closed="handleEditClosed"
        @pageChange="handlePageChange"
        @selectRowChange="handleSelectRowChange"
        @added="handleTableAdd"
    >
    <!--工具栏按钮后的按钮-->
      <template #toolbarSuffix>
        <!--    <a-button @click="onGetSelData">获取选中数据</a-button>-->
<!--            <a-button @click="onClearSel">清空选中</a-button>-->
        <a-button>导入</a-button>
        <a-button>导出</a-button>
        <a-button>复制</a-button>
        <a-button>提交</a-button>
      </template>
    <!--工具栏按钮前的按钮-->
        <template #toolbarPrefix>
          <a-button>弹窗添加</a-button>
        </template>
    <!--工具栏按钮后、表格前的行中的按钮，工具栏前的按钮可以直接在JVxeTable前定义即可-->
        <template #toolbarAfter>
<!--          <a-button>测试</a-button> -->
        </template>

      <!--  <template #subForm>-->
      <!--    -->
      <!--  </template>-->

      <!--  <template #mainForm>-->
      <!--    -->
      <!--  </template>-->
    <!--行展开，显示该行的整体描述信息，例如记录的description大段描述，以文本行的方式显示-->
        <template #expandContent="props">
          <div style="padding: 20px">
            <span>状态描述: {{ props.row.description }}!</span>
          </div>
        </template>
    <!--表格行操作按钮插槽-->
        <template #myAction="props">
          <a @click="onLookRow(props)">查看</a>
          <a-divider type="vertical"/>
          <Popconfirm title="确定删除吗？" @confirm="onDeleteRow(props)">
            <a>删除</a>
          </Popconfirm>
        </template>
    </JVxeTable>
  </a-card>

</template>

<script lang="ts" setup>
import { reactive, ref } from 'vue'
import { useMessage } from '/@/hooks/web/useMessage'
import {columns} from './SysStatus-data.ts'
import {list,saveOrUpdate,saveBatch,deleteOne,batchDelete} from './SysStatus-api'
import {JVxeTableInstance} from "/@/components/jeecg/JVxeTable/types";
import AButton from "/@/components/Button/src/BasicButton.vue";
import { Popconfirm } from 'ant-design-vue'

//消息框
const { createMessage } = useMessage()
//表格UI的引用，方法中可使用该值调用表格方法（tableRef.value.xxx())
const tableRef = ref<JVxeTableInstance>()
// 工具栏的按钮配置
const toolbarConfig = reactive({
  // add 新增按钮；save 保存按钮; remove 删除按钮；clearSelection 清空选择按钮
  btn: ['add', 'save', 'remove', 'clearSelection' ],
})
// 是否正在加载
const loading = ref(false)
//使用禁用，只读
const disabled = ref(false)
// 分页器参数
const pagination = reactive({
  // 当前页码
  current: 1,
  // 每页的条数
  pageSize: 10,
  // 可切换的条数
  pageSizeOptions: ['10', '20', '30', '100', '200'],
  // 数据总数（目前并不知道真实的总数，所以先填写0，在后台查出来后再赋值）
  total: 0,
})
// 选择的行
const selectedRows = ref<Recordable[]>([])
// 数据源，控制表格的数据
const dataSource = ref<Recordable[]>([])
// 列配置，控制表格显示的列ts引入
// 加载数据
loadData();
async function loadData() {
  loading.value = true
  // 调用查询数据接口
  const params = {
    pageNo: pagination.current,
    pageSize: pagination.pageSize,
  };
  await list(params).then(result => {
    // 后台查询回来的 total，数据总数量
    pagination.total = result.total
    // 将查询的数据赋值给 dataSource
    dataSource.value = result.records
    // 重置选择
    selectedRows.value = []
  }).finally(() => {
    // 这里是无论成功或失败都会执行的方法，在这里关闭loading
    loading.value = false
  })
}
//查看当前行
function onLookRow(props) {
  createMessage.success('请在控制台查看输出')
  // 参数介绍：
  // props.value          当前单元格的值
  // props.row            当前行的数据
  // props.rowId          当前行ID
  // props.rowIndex       当前行下标
  // props.column         当前列的配置
  // props.columnIndex    当前列下标
  // props.$table         vxe实例，可以调用vxe内置方法
  // props.target         JVXE实例，可以调用JVXE内置方法
  // props.caseId         JVXE实例唯一ID
  // props.scrolling      是否正在滚动
  // props.triggerChange  触发change事件，用于更改slot的值
  console.log('查看: ', { props })
}
//删除选中行（自定义,）
function onDelSel() {
  const xTable = tableRef.value!.getXTable()
  xTable.removeCheckboxRow()
}
//清除选中（自定义, ）
function onClearSel() {
  tableRef.value!.clearSelection()
}
//删除当前行（响应行内按钮） async await
 function onDeleteRow(props) {
  console.log("on delete one row",props.row.id);

   deleteOne({"id":props.row.id},()=>{
    console.log("delete succ.")
    // tableRef.value?.removeRows(props.row);//不重新加载数据，仅移除前端数据，会触发removed事件？
    loadData();//加载删除后的数据
  });

  // 调用删除方法
  // const res = await tableRef.value?.removeRows(props.row)
  // if (res && res.rows.length > 0) {
  //   createMessage.success('删除成功')
  // }
}
//工具栏添加
// Uncaught (in promise) TypeError: Cannot destructure property 'default' of 'undefined' as it is undefined.
function handleTableAdd(event){
  if(!event)return;//
  let row = event.row;
  // console.log('add',row);
  // loading.value = true;
  row.id = null;
  saveOrUpdate(row,false).then(() => {
    // createMessage.success(`保存成功！`);
    loadData();
  }).finally(() => {
    // loading.value = false
  });
}

// 【整体保存】点击保存按钮时触发的事件，工具栏保存
function handleTableSave({ $table, target }) {
  // 校验整个表格
  $table.validate().then((errMap) => {
    // target = $table;
    // 校验通过
    if (!errMap) {
      // 获取所有数据（？包含所有数据、当前页数据、新增数据、删除数据？）
      // let tableData = target.getTableData()
      //获取当前页显示的数据
      let tableData = tableRef.value.getTableData();
      console.log('-- 表格数据：', tableData)
        // 获取新增的数据
      // let newData = target.getNewData();
      let newData = tableRef.value.getNewData();
      console.log('-- 新增的数据：', newData)
      // 获取删除的数据
      // let deleteData = target.getDeleteData();
      let deleteData = tableRef.value.getDeleteData();
      console.log('-- 删除的数据：', deleteData)
      // 【模拟保存】
      loading.value = true
      //批量删除前端删除的数据，批量添加前端新增的行
      let addData = [];
      for(let rowData of tableData){
        rowData.id = null;
        addData.push(rowData);
      }
      saveBatch(addData).then(() => {
        // createMessage.success(`保存成功！`);
        loadData();
      }).finally(() => {
        loading.value = false
      })
    }
  })
}
// 触发删除事件（响应行批量删除事件）
function handleTableRemove(event) {
  // console.log("remove");
  // 把 event.deleteRows 传给后台进行删除（注意：这里不会传递前端逻辑新增的数据，因为不需要请求后台删除）
  // console.log('待删除的数据: ', event.deleteRows)
  // 也可以只传ID，因为可以根据ID删除
  let deleteIds = event.deleteRows.map(row => row.id);
  console.log('待删除的数据ids: ', deleteIds)
  // 请求后台删除
  loading.value = true
  batchDelete({"ids":deleteIds},()=>{
    // 假设后台返回删除成功，必须要调用 confirmRemove() 方法，才会真正在表格里移除（会同时删除选中的逻辑新增的数据）
    // event.confirmRemove();
    //删除后可刷新重新加载数据，否则当前页数据都删除后，页面仍然在第一空白页（可根据删除记录行数和分页数判断）
    if(pagination.total > pagination.pageSize){
      loadData();
    }
    loading.value = false;
  });
  // window.setTimeout(() => {
  //   loading.value = false
  //   createMessage.success('删除成功')
  //   // 假设后台返回删除成功，必须要调用 confirmRemove() 方法，才会真正在表格里移除（会同时删除选中的逻辑新增的数据）
  //   event.confirmRemove()
  // }, 1000)
}
// 单元格编辑完成之后触发的事件（自动保存）
function handleEditClosed(event) {
  let { $table, row, column } = event
  let field = column.property
  // 判断单元格值是否被修改
  if ($table.isUpdateByRow(row, field)) {
    // 校验当前行
    $table.validate(row).then((errMap) => {
      // 校验通过
      if (!errMap) {
        // 【模拟保存】
        // let hideLoading = createMessage.loading(`正在保存"${column.title}"`, 0);
        // console.log('即时保存数据：', row)
        saveOrUpdate(row,true).then(res => {
          // createMessage.success(`"${column.title}"保存成功！`)
          // 局部更新单元格为已保存状态
          $table.reloadRow(row, null, field)
        }).finally(() => {
          // hideLoading()
        })
      }
    })
  }
}
// 当分页参数变化时触发的事件
function handlePageChange(event) {
  // 重新赋值
  pagination.current = event.current
  pagination.pageSize = event.pageSize
  // 查询数据
  loadData()
}
// 当选择的行变化时触发的事件
function handleSelectRowChange(event) {
  selectedRows.value = event.selectedRows
}

</script>

<style scoped>

</style>
